<template>
  <div>
    <el-row class="tac">
      <el-col :span="12">
        <el-image style="width: 80px; border-radius: 50%; margin-top: 10px;margin-left:60px;height: 80px" :src="url"></el-image>
        <el-menu style="width: 280px"
            default-active="1"
            class="el-menu-vertical-demo"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b">
          <span v-for="item in menus" :key="item.id">
            <template v-if="!item.children || !item.children.length">
              <router-link :to="item.url">
                <el-menu-item :index="item.url" :route="item.url">
                  <i class="el-icon-menu"></i>
                  <span slot="title">{{item.name}}</span>
                </el-menu-item>
              </router-link>
            </template>
            <template v-else>
              <el-submenu :index="item.id.toString()">
                <template slot="title">
                  <i :class="item.icon"></i>
                  <span>{{ item.name }}</span>
                </template>
                <template v-for="child in item.children">
                  <router-link :to="child.url" :key="child.id">
                    <el-menu-item :index="child.url" :route="child.url">
                      <i class="el-icon-menu"></i>
                      <span slot="title">{{child.name}}</span>
                    </el-menu-item>
                  </router-link>
                </template>
<!--                  <el-menu-item v-for="child in item.children" :index="child.id.toString()" :key="child.id"-->
<!--                                :route="child.url">-->
<!--                  <template slot="title">-->
<!--                    <i :class="child.icon"></i>-->
<!--                    <span>{{ child.name }}</span>-->
<!--                  </template>-->
<!--                </el-menu-item>-->
              </el-submenu>
            </template>
          </span>
<!--          <router-link to="/productinfo-list">-->
<!--            <el-menu-item index="/productinfo-list">-->
<!--              <i class="el-icon-menu"></i>-->
<!--              <span slot="title">推广检验报告</span>-->
<!--            </el-menu-item>-->
<!--          </router-link>-->
<!--          <router-link to="/report-list">-->
<!--            <el-menu-item index="/report-list">-->
<!--              <i class="el-icon-menu"></i>-->
<!--              <span slot="title">检验报告</span>-->
<!--            </el-menu-item>-->
<!--          </router-link>-->
<!--          <router-link to="/productSH-list">-->
<!--            <el-menu-item index="/productSH-list">-->
<!--              <i class="el-icon-menu"></i>-->
<!--              <span slot="title">推广检验报告审核列表</span>-->
<!--            </el-menu-item>-->
<!--          </router-link>-->
<!--          <router-link to="/reportSH-list">-->
<!--            <el-menu-item index="/reportSH-list">-->
<!--              <i class="el-icon-menu"></i>-->
<!--              <span slot="title">检验报告审核列表</span>-->
<!--            </el-menu-item>-->
<!--          </router-link>-->
        </el-menu>
      </el-col>
    </el-row>
<!--    <div style="background: #2c3e50">-->

<!--      </div>-->
<!--      <el-menu id="ico" background-color="#2c3e50" style="padding-left: 0px;background-color: rgb(84, 92, 100);" color="cornsilk" default-active="/home" router>-->
<!--        <el-menu-item style="width:228px;height:60px;padding-left: 30px;" index="/">-->
<!--          &lt;!&ndash; <span slot="img"><img src="aaaaa"></span> &ndash;&gt;-->
<!--          <span id="title" style="color: #F0F0F0" slot="title">报告管理</span>-->
<!--        </el-menu-item>-->
<!--      </el-menu>-->
<!--    </div>-->
<!--    <div id="menum">-->
<!--      <el-menu style="width: 60%"-->
<!--        default-active="/"-->
<!--        class="el-menu-vertical-demo"-->
<!--        background-color="#545c64"-->
<!--        text-color="#fff"-->
<!--        active-text-color="#ffd04b"-->
<!--        router>-->
<!--        <el-submenu index="/admin" >-->
<!--          <template slot="title">-->
<!--            <i class="el-icon-location"></i>-->
<!--              <span id="lable">管理员管理</span>-->
<!--          </template>-->
<!--          <el-menu-item-group>-->
<!--            <el-menu-item index="/admin/admin-list"><span id="item">管理员列表</span></el-menu-item>-->
<!--          </el-menu-item-group>-->
<!--        </el-submenu>-->
<!--      </el-menu>-->
<!--    </div>-->
  </div>
</template>

<script>
export default {
  name: 'myMenu',

  data() {
    return {
      menus: [],
      fits: ['contain'],
      url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
    };
  },

  mounted() {
    if (JSON.parse(sessionStorage.getItem('menuList'))) this.menus = JSON.parse(sessionStorage.getItem('menuList')).map(item => {
      return {
        id: item.id + "",
        name: item.name,
        url: item.url,
        icon: 'el-icon-s-custom',
        children: item.children
      }
    });
    console.log(this.menus)
  },

  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    }
  },
};
</script>

